<example name="Button Ng">
  <file type="html">
    <div ng-app="test" ng-strict-di ng-controller="testCtrl">
      <p>
        <rg-button>Press me</rg-button>
        <rg-button>Press me Press me Press me Press me Press me Press me Press
          me
        </rg-button>
        <rg-button disabled="true">Press me</rg-button>
        <rg-button loader="true">Press me</rg-button>
        <rg-button delayed="true">Press me</rg-button>
      </p>

      <p>
        <rg-button mode="primary">Press me</rg-button>
        <rg-button mode="primary">Press me Press me Press me Press me Press me
          Press me Press me
        </rg-button>
        <rg-button mode="primary" disabled="true">Press me</rg-button>
        <rg-button mode="primary" loader="true">Press me</rg-button>
        <rg-button mode="primary" delayed="true">Press me</rg-button>
      </p>

      <p>
        <rg-button mode="blue">Press me</rg-button>
        <rg-button mode="blue">Press me Press me Press me Press me Press me
          Press me Press me
        </rg-button>
        <rg-button mode="blue" disabled="true">Press me</rg-button>
        <rg-button mode="blue" loader="true">Press me</rg-button>
        <rg-button mode="blue" delayed="true">Press me</rg-button>
      </p>

      <p>
        <rg-button>Press me</rg-button>
        <rg-button icon="{{caretDown}}">Press me</rg-button>
        <rg-button icon="{{close}}"></rg-button>
        <rg-button icon="{{close}}" mode="primary"></rg-button>
        <rg-button icon="{{close}}" mode="blue"></rg-button>
        <rg-button icon="{{permission}}" disabled="true"></rg-button>
        <rg-button icon="{{pencil}}" loader="true"></rg-button>
        <rg-button>Press me</rg-button>
      </p>

      <p>
        <rg-button danger="true">Press me</rg-button>
        <rg-button danger="true" disabled="true">Press me</rg-button>
        <rg-button danger="true" loader="true">Press me</rg-button>
        <rg-button danger="true" icon="{{pencil}}"></rg-button>
      </p>

      <p>
        <rg-button-link href="/button-link">Press me</rg-button-link>
        <rg-button-link href="/button-link" disabled="true">Press me
        </rg-button-link>
        <rg-button-link href="/button-link" loader="true">Press me
        </rg-button-link>
        <rg-button-link href="/button-link" icon="{{pencil}}"></rg-button-link>
      </p>

      <p>
        <rg-button tabindex="1">
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
        </rg-button>
        <rg-button tabindex="2">
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
        </rg-button>
        <rg-button tabindex="3">
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
        </rg-button>
        <rg-button tabindex="4">
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
        </rg-button>
      </p>
    </div>
  </file>

  <file type="js">
    import angular from 'angular';
    import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
    import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
    import pencilIcon from '@jetbrains/icons/pencil.svg';
    import caretDownIcon from '@jetbrains/icons/caret-down.svg';
    import closeIcon from '@jetbrains/icons/close.svg';
    import permissionIcon from '@jetbrains/icons/permission.svg';

    angular.module('test', [ButtonNG, IconNG]).
      controller('testCtrl', function ($scope) {
        $scope.pencil = pencilIcon;
        $scope.caretDown = caretDownIcon;
        $scope.close = closeIcon;
        $scope.permission = permissionIcon;
      });
  </file>
</example>
